<script>
import popupSelectorMultiple from "@/components/popupPicker/popupSelectorMultiple.vue"
export default {
  name: "collegeTypeSelector",
  components: { popupSelectorMultiple },
  props: {
    typeNames: Array,
  },
  methods: {
    open(value) {
      this.$refs.picker.open(value)
    },
  },
  data() {
    return {
      optionList: [
        {
          value: "综合类",
          label: "综合类",
        },
        {
          value: "理工类",
          label: "理工类",
        },
        {
          value: "农林类",
          label: "农林类",
        },
        {
          value: "医药类",
          label: "医药类",
        },
        {
          value: "师范类",
          label: "师范类",
        },
        {
          value: "财经类",
          label: "财经类",
        },
        {
          value: "政法类",
          label: "政法类",
        },
        {
          value: "语言类",
          label: "语言类",
        },
        {
          value: "艺术类",
          label: "艺术类",
        },
        {
          value: "体育类",
          label: "体育类",
        },
        {
          value: "军事类",
          label: "军事类",
        },
        {
          value: "民族类",
          label: "民族类",
        },
        {
          value: "其他类",
          label: "其他类",
        },
      ],
			value: [],
    }
  },
  emits: ["confirm"],
}
</script>

<template>
  <popup-selector-multiple
    ref="picker"
    :picker-option-list-props="optionList"
    @confirm="
      (val) => {
        $emit('confirm', val)
      }
    "
    title="院校类型选择"
  >
    <template v-slot:footer="">
      <view
        class="footer-btn"
        @click="
          () => {
            $refs.picker.echoData()
          }
        "
      >
        <view class="reset-btn">清空已选</view>
      </view>
    </template>
  </popup-selector-multiple>
</template>

<style scoped lang="scss">
.footer-btn {
  display: flex;
  justify-content: center;
  > .reset-btn {
    border: 2rpx solid var(--text-color-lighter);
    color: var(--text-color-lighter);
    font-size: 28rpx;
    text-align: center;
    padding: 20rpx 0;
    width: 50%;
    border-radius: 41rpx;
  }
}
</style>
